<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='viewport-fit=cover'>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            width: '100%';
            height: '100%';
        }
    </style>

    <script type="text/javascript">
        window.onload = function() {
            startMedia();
        }

        const params = new URLSearchParams(window.location);
        const paramValue = params.get('token');
        let sid = document.getElementById("sid");
        sid.innerHTML = paramValue;

        function startMedia(){
            fullScreen();
            let constraints = {
                video: {
                    width: {min: 640, ideal: 2720},
                    height: {min: 360, ideal: 1260},
                    aspectRatio: 16/9
                },
                audio: true
            };
            // 获取video摄像头区域
            let video = document.getElementById("video");
            // 返回的Promise对象
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            // then()异步，调用MediaStream对象作为参数
            promise.then(function (mediaStream) {
                video.srcObject = mediaStream;
                <!--        video.play();-->

                <!--        mediaStream.onaddtrack = function() {-->
                <!--            let videoPane = document.getElementById("video-pane");-->
                <!--            videoPane.style.visibility = 'visible';-->
                <!--        }-->

                setTimeout(()=>{
                    let videoPane = document.getElementById("video-pane");
                    videoPane.style.visibility = 'visible';
                }, 500);

                video.play();
            });
        }

        function fullScreen() {
            var video = document.getElementById('video');
            console.info("fullScreen11111111");
            if (video.webkitSupportsFullscreen) {
                video.webkitEnterFullscreen();
                console.info("fullScreen222222222222222222222");
            }

            // 检查浏览器是否支持全屏API
            if (video.requestFullscreen) {
                // 使用原生的方法进入全屏
                video.requestFullscreen().catch(err => {
                    console.error(err);
                });
            } else if (video.mozRequestFullScreen) { /* Firefox */
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                video.msRequestFullscreen();
            }
        }

        function cancelFullScreen() {
            if (document.webkitFullscreenElement) {
                document.webkitCancelFullScreen();
            }
        }

        // 获取远程视频的宽度和高度
        function getRemoteVideoSize() {
            const remoteVideo = document.getElementById('video');
            const width = remoteVideo.videoWidth;
            const height = remoteVideo.videoHeight;
            let sid = document.getElementById("sid");
            sid.innerHTML = width + "," + height;
        }
    </script>
</head>
<body>
<div id="video-pane" style="visibility:hidden;">
    <video id="video" width="100%" height="100%" autoplay="autoplay" controls></video>
</div>

<input type="button" title="HTML5摄像头" value="开启摄像头" onclick="startMedia()"/>
<span id="sid"></span>
</body>
</html>